<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .el-table .cell {
        white-space: pre-line;
    }
</style>
<body>
<div id="app">

    <el-radio v-model="radio" label="0">我的进货</el-radio>
    <el-radio v-model="radio" label="1">进货总数</el-radio>
    <el-radio v-model="radio" label="2">进货折让</el-radio>
    <el-radio v-model="radio" label="3">我的代理</el-radio>



    <el-table  v-show="radio==0"
              v-loading="loading"
              :row-class-name="tableRowClassName"
              :data="list[radio]"
              border
              style="width: 100%">

        <el-table-column
                type="index"
                label="排序"
                width="80">
        </el-table-column>

        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>

        <el-table-column
                prop="fromUser"
                label="转让人"
                width="180">
        </el-table-column>

        <el-table-column
                prop="toUser"
                label="接收人"
                width="180">
        </el-table-column>

        <el-table-column
                prop="item"
                label="明细">
        </el-table-column>
    </el-table>

    <el-table  v-show="radio==1"
              v-loading="loading"
              :row-class-name="tableRowClassName"
              :data="list[radio]"
              border
              style="width: 100%">

        <el-table-column
                type="index"
                label="排序"
                width="80">
        </el-table-column>

        <el-table-column
                prop="name"
                label="名字"
                width="180">
        </el-table-column>

        <el-table-column
                prop="amount"
                label="数量"
                width="180">
        </el-table-column>


    </el-table>

    <el-table  v-show="radio==2"

              v-loading="loading"
              :row-class-name="tableRowClassName"
              :data="list[radio]"
              border
              style="width: 100%">

        <el-table-column
                type="index"
                label="排序"
                width="80">
        </el-table-column>

        <el-table-column
                prop="name"
                label="名字"
                width="180">
        </el-table-column>

        <el-table-column
                prop="amount"
                label="数量"
                width="180">
        </el-table-column>

        <el-table-column
                label="操作"
                width="180">
            <template slot-scope="scope">
                <%--<el-button size="mini" type="success">一键转出</el-button>--%>
            </template>
        </el-table-column>

        <el-table-column
                prop="info"
                label="明细">
        </el-table-column>
    </el-table>

    <el-table v-show="radio==3"
              v-loading="loading"
              :row-class-name="tableRowClassName"
              :data="list[radio]"
              border
              style="width: 100%">

        <el-table-column
                type="index"
                label="排序"
                width="80">
        </el-table-column>

        <el-table-column
                prop="name"
                label="名字"
                width="180">
        </el-table-column>

        <el-table-column
                prop="amount"
                label="数量"
                width="180">
        </el-table-column>


        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="primary" @click="showDetail(scope.row.transferVos)" size="mini">转货明细</el-button>
                <el-button type="primary" @click="showSum(scope.row.sumVos)" size="mini">数量汇总</el-button>
                <el-button type="primary" @click="showVoucher(scope.row.voucherVos)" size="mini">折让</el-button>
                <%--<el-button v-if="scope.row.payStatus === 0 && scope.row.isPass === 1"  size="mini" >结账</el-button>--%>
                <!--<el-button size="mini" type="danger" >删除-->
                <!--</el-button>-->
            </template>
        </el-table-column>
    </el-table>


    <el-dialog title="明细" :visible.sync="dialogDetailVisible" width="80%">
        <el-table :data="detailList">
            <el-table-column property="date" label="日期" width="150"></el-table-column>
            <el-table-column property="fromUser" label="转让人" width="200"></el-table-column>
            <el-table-column property="toUser" label="接收人" width="200"></el-table-column>
            <el-table-column property="item" label="明细" width="500"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogDetailVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogDetailVisible = false">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="总数" :visible.sync="dialogSumVisible">
        <el-table :data="sumList">
            <el-table-column property="name" label="产品" width="250"></el-table-column>
            <el-table-column property="amount" label="数量" width="200"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogSumVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogSumVisible = false">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="折让" :visible.sync="dialogVoucherVisible" width="80%">
        <el-table :data="voucherList">
            <el-table-column property="name" label="名字" width="250"></el-table-column>
            <el-table-column property="amount" label="数量" width="200"></el-table-column>
            <%--<el-table-column property="info" label="详情" width="500"></el-table-column>--%>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVoucherVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVoucherVisible = false">确 定</el-button>
        </div>
    </el-dialog>



</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        methods: {
            tableRowClassName: function ({row, rowIndex}) {

                // if (row.addLevel === 1) {
                //     return 'warning-row';
                // } else {
                //     console.log(row.add)
                //     return 'success-row';
                // }
                return '';
            },
            showDetail: function(row){
                this.detailList = row;
                this.dialogDetailVisible = true
            },
            showSum: function(row){
                this.sumList = row
                this.dialogSumVisible = true
            },
            showVoucher: function(row){
                this.voucherList = row
                this.dialogVoucherVisible = true
            }
        },
        created: function () {
            this.loading = true;
            var s = this
            axios.post('/count/transfer/calcuate.json', {})
                .then(function (response) {
                    console.log(response);
                    s.list = response.data
                    s.loading = false;
                })
                .catch(function (error) {
                    console.log(error);
                    s.loading = false;
                    alert("错误");
                });
        },
        data: function () {
            return {
                dialogVoucherVisible:false,
                detailList:null,
                sumList:null,
                voucherList:null,
                dialogDetailVisible:false,
                dialogSumVisible:false,
                radio: "0",
                loading: true,
                list: null
            }
        }
    })
</script>
</html>